<template>
    <Card class="box-card">
        <Row>
            <Col span="18">
                <el-button-group style="margin: 3px;">
                    <el-button type="primary">
                        <el-icon size="18">
                            <CirclePlusFilled/>
                        </el-icon>
                        添加
                    </el-button>
                    <el-button type="primary">
                        <el-icon size="18" color="white">
                            <Grid/>
                        </el-icon>
                        编辑
                    </el-button>
                    <el-button type="warning">
                        <el-icon size="18">
                            <DeleteFilled/>
                        </el-icon>
                        删除
                    </el-button>
                </el-button-group>
            </Col>
            <Col span="6">col-6 | pull-18</Col>
        </Row>
        <el-table :data="tableData" border height="calc(100vh - 190px)" highlight-current-row>
            <el-table-column type="selection" label="Date" width="60"/>
            <el-table-column type="index" label="Date" width="60"/>
            <el-table-column prop="date" fixed label="Date" width="180"/>
            <el-table-column prop="name" label="Name" width="180"/>
            <el-table-column prop="date" label="date" width="180" sortable/>
            <el-table-column prop="city" label="city" width="250"/>
            <el-table-column prop="city" label="city" width="250"/>
            <el-table-column prop="city" label="city" width="250"/>
            <el-table-column prop="city" label="city" width="250"/>
            <el-table-column prop="city" label="city" width="250"/>
            <el-table-column prop="city" label="city" width="250"/>
            <el-table-column prop="city" label="city" width="250"/>
            <el-table-column prop="city" label="city" width="250" fixed="right"/>
            <el-table-column prop="address" label="Address" width="250" fixed="right"/>
            <el-table-column label="Operations" width="250" fixed="right">
                <template #default="scope">
                    <el-button-group>
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit
                        </el-button>
                        <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                        >Delete
                        </el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <Row>
            <Col span="18">
                <el-pagination background small layout="prev, pager, next,sizes, jumper" :total="1000"/>
            </Col>
            <Col span="6">gengduo</Col>
        </Row>
    </Card>
</template>
<script>
import WangEditor from '../../../components/edit/wangEditor.vue'
import Mock from "mockjs";
export default {
    name: "user",
    components: {WangEditor},
    data() {
        return {
            formItem: {
                input: '',
                select: '',
                radio: 'male',
                checkbox: [],
                switch: true,
                date: '',
                time: '',
                slider: [20, 50],
                textarea: ''
            },
            tableData: [],
        }
    },
    mounted() {
        let Data = Mock.mock({
            "tableData|100": [{
                'name': '@cname',
                'id|+1': 1,
                'state|10-60': 0,
                'age|10-60': 0,    //10-60以内的随机数，0用来确定类型
                'date': '@date("yyyy-MM-dd")',    //年月日
                'zip': '@city(true)',
                'address': '@city(true)',    //中国城市
                'city': '@city(true)'    //中国城市
            }]
        })
        this.tableData = Data.tableData;
        // console.log(  this.tableData  );
    }
}
</script>
<style lang="scss" scoped>
</style>
